<script setup lang="ts"></script>

<template>
  <div class="home-banner">
    <img class="banner" src="@/assets/images/home/banner.png" />
    <div class="txt-c">
      <div class="common-w-box">
        <p class="t1">
          Pathological diagnosis was performed by fusion of genotypes and
          phenotypes
        </p>
        <p class="t2">融合基因型和表行进行</p>
        <p class="t3">病理诊断</p>
        <p class="t4">
          肿瘤演化随着基因变异的积累，会在细胞和组织层面产生普种表型变化靶向离序可检测出重要基因的基因型信息，病理染色图像则是直接反映肿密组织和细胞形态的重要表型组数据病理医生目前融合基因里（靶向初序）和表型（染色图像）数据得到的定性病理诊断结果，是目前临床诊断的“金标准”
        </p>
      </div>
    </div>
    <div class="new-achievement">
      <div class="common-w-box">
        <div class="cnb">
          <div class="name">最新成果</div>
          <div class="text-c">
            <el-carousel height="36px" :autoplay="false" arrow="always">
              <el-carousel-item>
                <div class="li-c">
                  <div class="bt">
                    1.这是最新的一个研究成果，大家来一起看一下，研究一下
                  </div>
                  <div class="time">2023-12-12</div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="li-c">
                  <div class="bt">
                    2.这是最新的一个研究成果，大家来一起看一下，研究一下
                  </div>
                  <div class="time">2023-12-12</div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="li-c">
                  <div class="bt">
                    3.这是最新的一个研究成果，大家来一起看一下，研究一下
                  </div>
                  <div class="time">2023-12-12</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-banner {
  position: relative;

  .banner {
    width: 100%;
  }

  .txt-c {
    position: absolute;
    top: 236px;
    left: 0;
    width: 100%;

    p {
      width: 720px;
      padding: 0;
      margin: 0;
    }

    .t1 {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      color: rgb(255 255 255 / 70%);
    }

    .t2,
    .t3 {
      font-size: 70px;
      font-weight: 400;
      line-height: 90px;
    }

    .t2 {
      margin-top: 20px;
      color: #fff;
    }

    .t3 {
      margin-bottom: 20px;
      color: #3aace3;
    }

    .t4 {
      font-size: 13px;
      font-weight: 500;
      line-height: 20px;
      color: rgb(255 255 255 / 70%);
    }
  }

  .new-achievement {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96px;

    .cnb {
      display: flex;
      height: inherit;
      padding: 30px 24px;
      line-height: 36px;
      background: rgb(255 255 255 / 17%);

      .name {
        display: inline-block;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
      }

      .text-c {
        flex: 1;
        padding-left: 40px;
        color: #fff;

        :deep(.el-carousel__indicators) {
          display: none;
        }

        :deep(.el-carousel__arrow) {
          width: 20px;
          height: 20px;
        }

        :deep(.el-carousel__arrow--left) {
          right: 24px;
          left: auto;
        }

        :deep(.el-carousel__arrow--right) {
          right: 0;
        }

        .li-c {
          display: flex;
          align-items: center;
          padding-right: 80px;

          .bt {
            flex: 1;
            overflow: hidden;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .time {
            width: 120px;
            font-size: 14px;
            color: rgb(255 255 255 / 80%);
            text-align: right;

            i {
              display: inline-block;
              width: 16px;
              height: 16px;
              background: url('@/assets/images/home/time.png') center center
                no-repeat;
              background-size: contain;
            }
          }
        }
      }
    }
  }
}
</style>
